import React, { PureComponent } from 'react'
import { Button } from 'antd'
import Tools from '@/utils/Tools'
import { DataDevTree } from './page-components'
import { ArrowIcon, BlueSquare } from '../../components'
import styles from './index.less'
import emptyImgFolder from '@/assets/images/emptyImgResource.png'
const Bus = Tools.Bus

export default class Resource extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      isShow: styles.data_dev_left,
      selectedKeys: [],
    }
  }

  componentDidMount() {
  }

  // 树状列表右侧收缩按钮
  shousuo = (bool) => {
    if (bool) {
      this.setState(
        {
          isShow: styles.data_dev_left,
        },
      )
    } else {
      this.setState(
        {
          isShow: `${styles.data_dev_left} ${styles.data_dev_left_show}`,
        },
      )
    }
  }

  render() {
    const {
      isShow, selectedKeys,
    } = this.state
    return (
      <div className={styles.data_dev}>
        <div className={isShow}>
          <DataDevTree
            title="资源目录"
            selectedKeys={selectedKeys}
            onSelect={this.onSelect}
          />
        </div>
        <div className={styles.data_dev_right}>
          <div
            className={styles.data_dev_right_box}
            style={{ width: '100%', height: '100%' }}
          >
            <ArrowIcon
              shousuoFun={this.shousuo}
            />
            <div className={`dark_layout_node_box ${styles.none_box}`}>
              <div className={styles.explain}>
                <img className={styles.empty_page_img} src={emptyImgFolder} alt="" />
                <div className={styles.empty_page_text}>
                  <BlueSquare
                    style={{
                      width: '3.75rem',
                    }}
                  />
                  让我们上传一个资源吧
                </div>
                <div className={styles.empty_page_content}>
                  如在代码或函数中使用.jar等资源文件，那么需要先将资源上传至该项目的工作空间下，然后在函数中进行引用
                </div>
                <Button
                  type="primary"
                  size="large"
                  className={styles.empty_page_button}
                  onClick={() => { Bus.emit('ShowFileModal') }}
                >
                  上传资源
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
